<template>
    <div>
        <div>
            <label class="font">
                <el-button type="text" icon="el-icon-back" @click="handleBack()" class="fontBack"
                    style="color: black;">返回</el-button>
            </label>
            <label style="margin: 5px;">
                |
            </label>
            <label class="font">
                注册新用户
            </label>
        </div>

        <div class="container">

            <div style="margin-left: 30px;">

                <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">

                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>

                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio label=1>男</el-radio>
                            <el-radio label=0>女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="电话号码" prop="phoneNum">
                        <el-input v-model="form.phoneNum"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>

                    <el-form-item label="出生日期" prop="birth">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.birth"></el-date-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="介绍" prop="introduction">
                        <el-input v-model="form.introduction"></el-input>
                    </el-form-item>

                    <el-form-item label="地址" prop="location">
                        <el-input v-model="form.location"></el-input>
                    </el-form-item>
                </el-form>

                <el-button type="primary" icon="el-icon-check" class="but" @click="
                    handleAdd('form')">添加</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { addConsumer } from '@/api/consumer'
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
                sex: "1",
                phoneNum: '',
                email: '',
                birth: '',
                introduction: '',
                location: '',
                avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                phoneNum: [
                    {
                        required: true, trigger: 'blur', validator: (rule, value, callback) => {
                            if (value === '' || !(/^1(3|4|5|6|7|8)\d{9}$/).test(value)) {
                                callback(new Error('请输入正确的手机号'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
                email: [
                    {
                        required: true, trigger: 'blur', validator: (rule, value, callback) => {
                            if (value === '' || !(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(value)) {
                                callback(new Error('请输入正确的邮箱'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
                birth: [
                    { required: true, message: '请输入出生日期', trigger: 'blur' }
                ],
                introduction: [
                    { required: true, message: '请输入本人介绍', trigger: 'blur' }
                ],
                location: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleBack() {
            this.$router.push('/Consumer')
        },
        handleAdd(form) {

            this.$refs[form].validate((valid) => {
                if (valid) {
                    const data = {
                        "username": this.form.username, "password": this.form.password, "phoneNum": this.form.phoneNum, "email": this.form.email,"sex" :this.form.sex,
                        "birth": this.form.birth, "introduction": this.form.introduction, "location": this.form.location, "avatar": this.form.avatar
                    }
                    addConsumer(data).then((res) => {
                        if (res.data.code === 1) {
                            this.$message.success('添加成功')
                            this.handleBack()
                        }
                        else {
                            this.$message.error(res.data.msg)
                        }
                    })
                } else {
                    this.$message.error('请输入正确的表单项')
                }
            })
        }
    }

}
</script>

<style scoped>
.container {
    position: relative;
    z-index: 1;
    height: 700px;
    background: #fff;
    padding: 50px;
    border-radius: 4px;
    margin-top: 10px;
    width: 900px;
    margin: auto;
}

.font {
    font-size: 15px;
    font-weight: bolder;
}

.fontBack {
    font-size: 15px;
    font-weight: normal;
}

.img {
    margin-left: 400px;
    margin-bottom: 500px;
    width: 100px;
    left: 50%;
}

.block {
    margin-top: 10px;

}

.form {
    margin-left: 10%;
    width: 50%;
}

.but {
    margin-top: 50px;
    float: right;
    width: 100px;
}
</style>